<template>
    <div>
        <div>组件的基本使用a</div>
        <div>组件的基本使用a</div>
<!--        :is 如果是自定义组件注意赋值方式-->
        <component :is="comp" v-bind="obj" v-on:click="f1"></component>
        <component :is="comps" v-bind="obj"></component>  <!--v-on="f2"-->
        <component :is="comp2">ElButton</component>
        <hr>
        <el-button @click="testuseModal">testuseModal</el-button>
        <el-button @click="testMdl">NotifyModalContent</el-button>
    </div>
</template>

<script  setup>
    // import v  from "../../assets/test.mp4"
    // import {ref,reactive,onMounted} from 'vue'
    import { useModal } from "./hooks/useModal.js"
    import { ElButton } from 'element-plus'
    import abc from "./components/abc.vue"
    import abcd from "./components/abcd.vue"
    import modalContent from "./hooks/modalContent.vue"
    import NotifyModalContent from "./hooks/NotifyContent.vue"
    import { useUserInfoStore } from '../../store/userInfo';
    import {storeToRefs} from "pinia";
    import { testStore } from '../../store/test';
    const userInfo = useUserInfoStore()
    // const {name,age,token} = storeToRefs(userInfo)   //解构 防止丢失响应式; 解构方法不需要使用storeToRefs 直接解构即可
    const test = testStore()
    let xx = ref(123)
    let xx2 = reactive({
        a:"a",
        b:"b",
        type:"primary",
    })

    let obj = {
        a:"a",
        b:"b",
        type:"primary",
        c:()=>{}
    }
    // let comp = ElButton
    let comp = abc
    let comps = abcd
    let comp2 = ElButton


    const f1 = ()=>{

    }

    const f2 = ()=>{

    }

    const f3 = ()=>{
        console.log("f3")
        console.log("f2")
        console.log("f2")
    }

    const f4 = ()=>{
        console.log("f4")
    }
    const testuseModal = async ()=>{
      const { result, values } =await useModal(modalContent,{
           title: '标题',
           width: 800,
           emitValues: true,
           showClose: true,
           closeOnClickModal: false,
           closeOnPressEscape: false,
           contentProps: {
              a: 1,
              b: 2,
              c: 3,
              d: 4,
              name:"wf",
              id:1001,
               rowData:{
                   name:"wf",
                   id:1001
              }
           },
           needFooter: true,
           needHeader: true
       })
        console.log(result, values)
    }

    const testMdl = async (row)=> {
        const { result } = await useModal(NotifyModalContent, {
            title: '提示',
            width: 400,
            contentProps: {
                content:
                    '<div uno-text="12px [var(--color-level-3)]"><p>确认删除吗？删除以后不再保留相关数据。</p></div>',
                type: 'error'
            },
            confirmButtonType: 'danger',
            confirmButtonText: '删除'
        })

        if (result) {

        }
    }

    onMounted(()=>{
        console.log(xx)
        console.log(xx2)
    })
</script>

<style scoped>

</style>